<template>
	<view class="container">
		<view class="tui-searchbox" >
			<view class="tui-search-input">
				<icon type="search" :size='13' color='#333' @click="handlesearch(searchContent)"></icon>
				<input confirm-type="search" style="width: 530rpx;" placeholder="输入名称搜索圈子"  placeholder-class="tui-input-plholder"
				 class="tui-input" v-model.trim="searchContent" />
				<!-- <icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon> -->
			</view>
			<!-- 创建圈子按钮 -->
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create" v-if="!phone">
				<view class="img">
					<image src="../../static/images/icon/create_cir.png" mode="aspectFill"></image>
				</view>
				<view class="desc">
					建圈
				</view>
			</button>
			<button  @click="create" hover-class="none" class="create" v-else>
				<view class="img">
					<image src="../../static/images/icon/create_cir.png" mode="aspectFill"></image>
				</view>
				<view class="desc">
					建圈
				</view>
			</button>
			<!-- <view class="tui-search-input" @tap="search">
				<icon type="search" :size="13" color="#999"></icon>
				<text class="tui-search-text">搜索Thorui商品</text>
			</view> -->
		</view>
		<view class="search-list" v-show="havesearch && searchList.length">
			<view class="search-item" v-for="item in searchList" :key="item.id" @tap.stop="godetail(item.id)">
				<view class="logo">
					<image :src="item.logo" mode="aspectFill"></image>
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="search-list-none" v-show="!searchList.length  && havesearch">
			搜索结果为空
		</view>
		<view class="cir-list" v-if="!searchContent && !havesearch">
			<scroll-view scroll-y scroll-with-animation class="tab-view"  :scroll-into-view="scrollViewId"  :style="{ height: height + 'px', top: top + 'px' }">
				<view :id="`id_${index}`" v-for="(item, index) in tabs" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="swichOne(item, index)">
					<text>{{ item.category_title }}</text>
				</view>
			</scroll-view>
			<block v-for="(item, index) in tabs"  :key="index">
				<scroll-view scroll-y class="right-box" @scrolltolower="bottom" :style="{ height: height + 'px', top: top + 'px' }" v-if="currentTab == index">
					<!--内容部分 start 自定义可删除-->
					<view class="page-view">
						<view class="class-box">
							<!-- 列表 -->
							<view class="cate-content">
								<view class="cate-content__list" v-if="childCategories">
									<scroll-view scroll-y scroll-with-animation   style="height: 100%" >
										<block v-if="childCategories.length > 0">
											<view
												class="cate-content__list-item"
												v-for="(item, index) in childCategories"
												:key="index"
												@click="godetail(item.id)"
											>
												<view class="cate-content__thumbnail">
													<image  :src="item.logo" mode="aspectFill" />
												</view>
										
												<view class="cate-content__list-item-info">
													<view class="cate-content__title">{{ item.name }}</view>
													<view class="cate-content__desc">{{ item.intro }}</view>
												</view>
											</view>
										
											<u-loadmore :status="loadmore" bg-color="transparent" />
										</block>
										<view v-else>
											<view class="none">
												该类别暂无圈子喔~_~
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
					<!--内容部分 end 自定义可删除-->
				</scroll-view>
			</block>
		</view>
	</view>
</template>

<script>
	
	import api from '../../common/api.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				searchContent:'',			//搜索文本
				searchList:[],				//搜索结果
				havesearch:false,
				tab: [], 						  // 部分一级分类
				tabs:[], 							// 完整一级分类
				childCategories: [],  // 二级分类
				page: 1, 						  // 分页
				limit:15,							//单页条数限制
				height: 0, //scroll-view高度
				top: 0,
				currentTab: 0, //预设当前项的值
				scrollViewId:"id_0"
			};
		},
		
		computed:mapState(['phone']), 
		
		onLoad(options) {
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						let header = 120;
						let top = 0;
						//#ifdef H5
						top = 44;
						//#endif
						this.height = res.windowHeight - uni.upx2px(header);
						this.top = top + uni.upx2px(header);
					}
				});
			}, 500);
		},
		
		watch:{
		 searchContent(n,o){//监听搜索框输入值的变化---500ms内只触发一次
		   clearTimeout(this.timeout)
			 this.timeout = setTimeout(() => {
				 this.handlesearch(n)
			 },500)
		 },
		},
		
		async created() {
			await this.getCategoryData()
		},
		
		methods: {
			
			async getPhoneNumber (e) {//手机号授权
		　　if(e.detail.errMsg=="getPhoneNumber:ok"){
					let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
					let sres = await api.SetUserPhone(res.purePhoneNumber)
					if(sres.err == 0) {
						this.$store.commit('setPhone',res.purePhoneNumber)
						this.create()
						uni.showToast({
							title:sres.msg,
							duration:800
						})
					}
				}else{
			        console.log('用户拒绝了手机号授权') ;   
			    }
			},
			
			// async focus() {//搜索功能
			// 	if(this.searchContent == '') {
			// 		this.havesearch = false
			// 		return
			// 	}else {
			// 		this.searchList = await api.GetSearchCir(this.searchContent)
			// 		this.havesearch = true
			// 		console.log(this.searchList);
			// 		console.log(this.searchContent);
			// 	}
			// },
			
			async handlesearch(content) {//搜索功能
				if(content == '') {
					this.havesearch = false
					return false
				}else {
					this.searchList = await api.GetSearchCir(this.searchContent)
					this.havesearch = true
					console.log(this.searchList);
					console.log(this.searchContent);
				}
			},
			
			godetail() {//跳转到圈子页面
				uni.navigateTo({
					url:'/pages/circle/comps/Detail?id='+arguments[0]
				})
				console.log(arguments[0]);
			},
			
			create() {//跳转到创建圈子页面
				uni.navigateTo({
					url:'/pages/circle/comps/createCircle?activeTab=' + this.currentTab
				})
			},
			
			async getCategoryData() {//获取圈子分类
				this.cateList = await api.GetCategories()
				this.tabs.push({"category_id":0,"category_title": "最火"},{"category_id":0,"category_title": "热门"},{"category_id":0,"category_title": "最新"})
				this.tab = this.cateList.map(item => {return {category_id: item.id, category_title: item.name}})
				this.tabs.push(...this.tab)
				this.childCategories =  await this.getChildCategoryData(this.page,this.limit,this.tabs[this.currentTab])  //需要确保得到上个请求数据id，再去发送该请求
			},
			 
			async bottom() {//某分类下加载更多圈子
				let list = await this.getChildCategoryData(this.page + 1,this.limit,this.tabs[this.currentTab])
				console.log('活动',list);
				if(list && list.length>0){
					this.page ++
					this.childCategories.push(...list)
				}else{
					uni.showToast({ title:'没有更多了', icon: "none" ,duration:800});
				}
					console.log('触底');
			},
			
			async getChildCategoryData(page,limit,cate) {// 获取二级栏目数据
				if(cate.category_title == '最火') {
					return await api.GetHotCircles(page,limit)
				}else if(cate.category_title == '热门') {
					return await api.GetRankCircles(page,limit)
				}else if(cate.category_title == '最新') {
					return await api.GetNewCircles(page,limit)
				}else {
					return await api.GetCateCirList(page,limit,cate.category_id)
				}
				
			},
			
			async swichOne(item,index) {// 点击一级标题切换当前页时改变样式
			  let cur = index
				if (this.currentTab == cur) {
					return false;
				}else {
					this.currentTab = cur;
					this.page = 1
					this.loadmore = 'loadmore'
					this.childCategories =  await this.getChildCategoryData(this.page,this.limit,this.tabs[this.currentTab])
					this.checkCor();
				}
			  
			},
			//判断当前滚动超过一屏时，设置tab标题滚动条。
			checkCor: function() {
				if (this.currentTab > 6) {
					this.scrollViewId = `id_${this.currentTab - 2}`;
				} else {
					this.scrollViewId = `id_0`;
				}
			},
			detail(e) {
				uni.navigateTo({
					url: '../productDetail/productDetail'
				});
			},
			productList(e) {
				let key = e.currentTarget.dataset.key;
				uni.navigateTo({
					url: '../productList/productList?searchKey=' + key
				});
			},
			search: function() {
				uni.navigateTo({
					url: '../../news/search/search'
				});
			}
		}
	};
</script>

<style lang="scss">
page {
	background: #fcfcfc;
}

/* 左侧导航布局 start*/

/* 隐藏scroll-view滚动条*/
.cate-content {
	flex: 1;
	padding: 0 20rpx;
	box-sizing: border-box;

	&__list {
		/* #ifdef H5 */
		height: calc(100vh - 44px - 50px - 160rpx);
		/* #endif */
		/* #ifndef H5 */
		height: calc(100vh - 160rpx);
		/* #endif */

		&-item {
			display: flex;
			// margin-bottom: 26rpx;
			padding: 10rpx 8rpx;
			border-bottom: 2rpx solid #eeeeee;
			
			&-info {
				display: flex;
				flex-direction: column;
				
				flex: 1;
				justify-content: center;
				overflow: hidden;
				
			}
		}
	}

	&__thumbnail {
		width: 110rpx;
		height: 110rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-right: 24rpx;
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 1rpx solid #f3f3f3;
		}
	}

	&__title {
		// font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	&__desc {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		font-size: 26rpx;
		color: #999;
	}

	
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}

.tui-searchbox {
	width: 100%;
	height: 120rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	top: 0;
	/* #ifdef H5 */
	top: 44px;
	/* #endif */
	z-index: 100;
}
.search-list-none {
	height: calc(100vh - 120rpx);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.search-list {
	padding: 120rpx 0 0;
	.search-item {
		display: flex;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		padding: 15rpx 30rpx;
		border-bottom: 1rpx solid #afafaf;
		.logo {
			width: 110rpx;
			height: 110rpx;
			margin-right: 30rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				border: 1rpx solid #f3f3f3;
			}
		}
	}
}
button {
	padding: 0;
	margin: 0;
	padding: 0 12rpx;
}
.create {
	width: 134rpx;
	height: 65rpx;
	line-height: 65rpx;
	z-index: 1;
	// background-color: #0068ff;
	color: #363636;
	border: 1rpx solid #afafaf;
	font-size: 30rpx; 
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.desc {
		margin-top: 6rpx;
	}
	.img {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 6rpx;
		image {
			width: 100%;
			height: 100%	;
		}
	}
	
}
.none {
	height: 80vh;
	padding: 0 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.tui-searchbox::after {
	content: '';
	position: absolute;
	// border-bottom: 1rpx solid #d2d2d2;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	bottom: 0;
	right: 0;
	left: 0;
}

.tui-search-input {
	width: 450rpx;
	height: 75rpx;
	padding: 0 30rpx;
	background: #f1f1f1;
	border-radius: 10rpx;
	font-size: 26rpx;
	color: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-search-text {
	padding-left: 16rpx;
}

.tab-view {
	/* height: 100%; */
	width: 200rpx;
	border-right: 1rpx solid #dadada;
	position: fixed;
	left: 0;
	z-index: 10;
}

.tab-bar-item {
	width: 200rpx;
	height: 110rpx;
	// background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
}

.active {
	position: relative;
	color: #000;
	font-size: 30rpx;
	font-weight: 600;
	background: #fcfcfc;
}

.active::before {
	content: '';
	position: absolute;
	border-left: 8rpx solid #e41f19;
	height: 30rpx;
	left: 0;
}

/* 左侧导航布局 end*/

.right-box {
	width: 100%;
	position: fixed;
	padding-left: 220rpx;
	box-sizing: border-box;
	left: 0;
}

.page-view {
	width: 100%;
	overflow: hidden;
	padding-top: 20rpx;
	padding-right: 20rpx;
	box-sizing: border-box;
	padding-bottom: env(safe-area-inset-bottom);
}

.swiper {
	width: 100%;
	height: 220rpx;
	border-radius: 12rpx;
	overflow: hidden;
	transform: translateZ(0);
}

/* #ifdef MP-WEIXIN */
.swiper .wx-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

.swiper .wx-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

.swiper .wx-swiper-dot-active::before {
	background: #fff;
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .swiper .uni-swiper-dot {
	width: 8rpx;
	height: 8rpx;
	display: inline-flex;
	background: none;
	justify-content: space-between;
}

>>> .swiper .uni-swiper-dot::before {
	content: '';
	flex-grow: 1;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 16rpx;
	overflow: hidden;
}

>>> .swiper .uni-swiper-dot-active::before {
	background: #fff;
}

>>> .swiper .uni-swiper-dot.uni-swiper-dot-active {
	width: 16rpx;
}

/* #endif */

.slide-image {
	width: 100%;
	height: 220rpx;
}

.class-box {
	padding-top: 30rpx;
}

.class-item {
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
}

.class-name {
	font-size: 22rpx;
}

.g-container {
	/* padding-top: 20rpx; */
	display: flex;
	display: -webkit-flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: wrap;
}

.g-box {
	width: 33.3333%;
	text-align: center;
	padding-top: 40rpx;
}

.g-image {
	width: 120rpx;
	height: 120rpx;
}

.g-title {
	font-size: 22rpx;
}
</style>
